<template>
  <div>
    <!-- 顶部数据 begin -->
    <div class="header">
      <img class="avatar" :src="avatarUrl">
      <img class="calendar" src="../../../static/images/points/calendar.png">
      <div class="userInfo">
        <div class="userName">{{nickName}}</div>
        <div class="points"><span>{{totalScore}}</span> 积分</div>
      </div>
      <div class="registerInfo">本月连续签到 <span>{{dayCount}}</span> 天，累积签到 <span>{{totalDayCount}}</span> 天</div>
    </div>
    <!-- 顶部数据 end -->

    <!-- 连续签到奖品 begin -->
    <div class="prize">
      <scroll-view :style="{'height': '180rpx'}" :scroll-x="true">
        <div class="swiper-item" :class="[item.style]" v-for="(item, index) in registerCountList" :key="index" @click="receiveRegisterCredit(item, index)">
          <div>连续{{item.day_count}}天</div>
          <div class="item2">
            <img v-if="item.style != 'received'" src="../../../static/images/points/gift.png" alt="">
            <img v-else src="../../../static/images/points/received.png" alt="">
          </div>
        </div>
      </scroll-view>
    </div>
    <!-- 连续签到奖品 end -->
    <!-- 日期 begin -->
    <div class="date">
      <scroll-view :style="{'height': '120rpx'}" :scroll-x="true" :scroll-into-view="toView">
        <div class="swiper-item" :id="'d' + item.day" v-for="(item, index) in registerDateList" :key="index">
          <div v-if="currentDay == item.day">今天</div>
          <div v-else>{{currentMonth}}.{{item.day}}</div>
          <div class="item2">
            <img v-if="item.issign" src="../../../static/images/points/registered.png" alt="">
            <img v-else src="../../../static/images/points/register.png" alt="">
          </div>
        </div>
      </scroll-view>
    </div>
    <!-- 日期 end -->

    <!-- 积分兑换 begin -->
    <div class="exchange">
      <span @click="navToExchange">积分兑换</span>
    </div>
    <!-- 积分兑换 end -->

    <!-- 签到规则 begin -->
    <div class="rule">
      <div class="title">签到规则</div>
      <div class="content">*用户在自然月内（每月1号至最后一天）签到达一定时间后，可以领取相应的连续签到奖励：</div>
      <div class="content">1、用户每天可签到1次，并可获得10积分；</div>
      <div class="content">2、连续签到3天可获得2积分，连续签到7天可获得4积分，连续签到14天可获得6积分，连续签到21天可获得8积分，连续签到28天可获得10积分；</div>
      <div class="content">3、连续签到天数越长，获得的积分越多。若签到中断，则连续签到记录将重新开始计算，累计签到每月清零一次；</div>
      <div class="content">4、以自然月为周期，月初签到信息将重置，开始新一轮签到；</div>
      <div class="content">5、累计积分到一定额度可兑换奖品，兑换的奖品（实物）将于次月月底前寄送；</div>
      <div class="content">6、兑换奖品后未提交个人信息（姓名、地址、手机号），则视为放弃领奖。</div>
    </div>
    <!-- 签到规则 end -->

    <!-- 签到成功弹窗 begin -->
    <div class="mask" catchtouchmove='ture' v-if="showMask">
      <div class="mask-content">
        <img class="mask-succ" src="../../../static/images/points/mask-succ.png" alt="">
        <img class="mask-succ-bg" src="../../../static/images/points/mask-succ-bg.png" alt="">
        <div class="mask-content-text">
          <div class="text1">签到成功</div>
          <div class="text2">恭喜您领取<span>10</span>积分</div>
          <div class="text3">连续签到可获额外积分</div>
          <div class="text4"><span @click="closeMask">知道了</span></div>
        </div>
      </div>
    </div>
    <!-- 签到成功弹窗 end -->

    <!-- 连续签到领奖弹窗 begin -->
    <div class="mask1" catchtouchmove='ture' v-if="showRMask">
      <div class="mask1-content">
        <img src="../../../static/images/points/mask-img.png" alt="">
        <div class="mask1-content-text">
          <div class="text1"><span>18周年行庆</span>送你坚持中的小惊喜</div>
          <div class="text2">恭喜获得 <span>{{showRMaskCreditNum}}</span> 积分</div>
        </div>
        <img class="close" src="../../../static/images/points/mask-close.png" alt="" @click="closeRMask">
      </div>
    </div>
    <!-- 连续签到领奖弹窗 end -->

  </div>
</template>

<script>
import utils from '../../utils/index.js'
export default {
  data () {
    return {
      nickName: '', // 用户昵称
      avatarUrl: '', // 用户头像
      totalScore: 0, // 总积分
      dayCount: 0, // 连续签到天数
      totalDayCount: 0, // 本月签到总数
      // 连续签到，状态：received已领，default不能领取，active可领取
      registerCountList: [],
      // 签到日期，状态：1已签到，0未签到
      registerDateList: [],
      currentMonth: utils.getCurrentMonth(),
      currentDay: utils.getCurrentDay(),
      toView: '',
      showMask: false, // 每日签到弹窗状态：true显示弹窗
      showRMask: false, // 连续签到弹窗状态：true显示弹窗
      showRMaskCreditNum: 0, // 连续签到弹窗积分数
      openid: ''
    }
  },

  mounted () {
    this.init()
  },

  onShow () {
    this.openid = wx.getStorageSync('openid')
    this.register(this.openid)
    this.getTotalScore()
  },

  methods: {
    /**
     * 初始化用户昵称、头像、积分数据
     */
    init () {
      if (wx.getStorageSync('userInfo') && wx.getStorageSync('userInfo')) {
        const userInfo = wx.getStorageSync('userInfo')
        this.nickName = userInfo.nickName
        this.avatarUrl = userInfo.avatarUrl
      }
    },

    /**
     * 每日签到
     */
    register (openid) {
      this.$http.post('/api/v1/sign', {
        body: {
          openid: openid
        }
      }).then(res => {
        console.log('签到', res)
        if (res.data.code === '0') {
          const data = res.data.data
          this.dayCount = data.day_count
          this.totalDayCount = data.total_day_count

          // 连续签到处理
          const continueDaysInfo = data.continue_days_info
          for (let day of continueDaysInfo) {
            if (day.status === 0) {
              day.style = 'active'
            } else if (day.status === 1) {
              day.style = 'received'
            } else {
              day.style = 'default'
            }
          }
          this.registerCountList = continueDaysInfo

          this.registerDateList = data.days_info
          this.toView = 'd' + this.currentDay

          if (!data.repeat_sign_flag) {
            this.showMask = true
          }
        } else {
          // 签到失败
          console.log('签到失败')
        }
      })
    },

    /**
     * 连续签到积分兑换事件
     */
    receiveRegisterCredit (item, index) {
      console.log('连续签到------>>', item)
      const day = item.day_count
      const style = item.style
      if (style === 'active') {
        console.log('连续签到积分兑换', day)

        let num
        switch (day) {
          case 3:
            num = 2
            break
          case 7:
            num = 4
            break
          case 14:
            num = 6
            break
          case 21:
            num = 8
            break
          case 28:
            num = 10
            break
        }

        this.$http.post('/api/v1/award', {
          body: {
            openid: this.openid,
            day_count: day
          }
        }).then(res => {
          console.log('连续签到返回数据', res)
          if (res.data.code === '0') {
            const data = res.data.data
            this.totalScore = data.total_soce
            this.registerCountList[index].style = 'received'
            this.showRMaskCreditNum = num
            this.showRMask = true
          } else {
            wx.showModal({
              content: '领取失败！',
              showCancel: false
            })
          }
        })
      }
    },

    /**
     * 查询总积分
     */
    getTotalScore () {
      this.$http.post('/api/v1/score/total_score?openid=' + this.openid).then(res => {
        this.totalScore = res.data.data.total_score
      })
    },

    /**
     * 跳转到兑换页面
     */
    navToExchange () {
      wx.navigateTo({
        url: '../exchange/main?totalScore=' + this.totalScore
      })
    },

    /**
     * 关闭签到成功遮罩
     */
    closeMask () {
      console.log('关闭遮罩')
      this.showMask = false
    },
    /**
     * 关闭连续签到成功遮罩
     */
    closeRMask () {
      console.log('关闭遮罩')
      this.showRMask = false
    }
  }
}
</script>

<style scoped>
.header {
  height: 410rpx;
  background: linear-gradient(to bottom left, #fed095, #faf4c0);
  position: relative;
}

.header .avatar {
  height: 140rpx;
  width: 140rpx;
  border-radius: 100%;
  position: absolute;
  top: 50rpx;
  left: 20rpx;
  z-index: 1;
}

.header .calendar {
  height: 260rpx;
  width: 474rpx;
  position: absolute;
  top: 50rpx;
  right: 10rpx;
}

.header .userInfo {
  width: auto;
  color: #997f61;
  font-size: 22rpx;
  padding: 15rpx 30rpx 15rpx 190rpx;
  background: #fff;
  opacity: 0.8;
  border-top-right-radius: 100rpx;
  border-bottom-right-radius: 100rpx;
  position: absolute;
  top: 75rpx;
  left: 0;
  z-index: 0;
}

.header .userInfo .points {
  font-size: 28rpx;
  font-weight: bold;
  margin-top: 5rpx;
}

.header .userInfo .points span {
  color: #ef535e;
}
.header .registerInfo {
  position: absolute;
  bottom: 30rpx;
  left: 30rpx;
  font-size: 28rpx;
  color: #a87d4f;
}

.header .registerInfo span {
  font-size: 34rpx;
  color: #ce363e;
}

.prize {
  padding-top: 50rpx;
  background: #9f151d;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  white-space: nowrap;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.prize .swiper-item {
  width: 190rpx;
  height: 110rpx;
  display: inline-block;
  text-align: center;
  font-size: 26rpx;
  padding: 20rpx 5rpx;
  margin: 0 18rpx;
  border-radius: 10rpx;
}

.prize .swiper-item .item2 {
  margin-top: 10rpx;
}

.prize .default {
  color: #c27555;
  background: linear-gradient(to bottom, #e6b0a8, #e39878);
}

.prize .active {
  color: #c4815b;
  background: linear-gradient(to bottom, #fef1e1, #f8ce9b);
}

.prize .active img {
  animation: mymove1 0.4s infinite;
  animation-direction: alternate;
}

@keyframes mymove1 {
  from {
    transform: rotate(-10deg);
  }
  to {
    transform: rotate(10deg);
  }
}

.prize .received {
  color: #c3815b;
  background: linear-gradient(to bottom, #ecc5ba, #e7b08e);
}

.prize .received img {
  height: 59rpx !important;
  width: 50rpx !important;
}

.prize .swiper-item img {
  height: 59rpx;
  width: 58rpx;
}

.date {
  padding-top: 20rpx;
  background: #9f151d;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  white-space: nowrap;
  color: #fff;
  font-size: 26rpx;
}

.date .swiper-item {
  width: 163rpx;
  display: inline-block;
  text-align: center;
  color: #ffe1be;
}

.date .swiper-item img {
  height: 19rpx;
  width: 163rpx;
}

.exchange {
  padding: 40rpx 0 100rpx 0;
  background: #9f151d;
  text-align: center;
}
.exchange span {
  padding: 18rpx 80rpx;
  border-radius: 100rpx;
  background: linear-gradient(to bottom, #efc48a, #fadbba);
  font-size: 38rpx;
  font-weight: bold;
  color: #a5222a;
}

.rule {
  padding: 40rpx 30rpx 100rpx 30rpx;
  background: #8c0e15;
  color: #ffb7bc;
}
.rule .title {
  padding: 20rpx;
  text-align: center;
  font-size: 36rpx;
}

.rule .content {
  font-size: 28rpx;
  line-height: 1.5;
}

.mask,
.mask1 {
  display: block;
  float: right;
  width: 750rpx;
  height: 100%;
  z-index: 12;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
}

.mask-content {
  text-align: center;
  position: relative;
  top: 240rpx;
  animation: mymove 0.2s 1;
}

@keyframes mymove {
  from {
    transform: scale(0); /*开始为原始大小*/
  }
  to {
    transform: scale(1); /*放大1.1倍*/
  }
}

.mask-content .mask-succ {
  height: 314rpx;
  width: 385rpx;
  z-index: 3;
  position: relative;
  top: 0;
}

.mask-content .mask-succ-bg {
  height: 335rpx;
  width: 555rpx;
  position: relative;
  top: -330rpx;
  z-index: 1;
}

.mask-content-text {
  line-height: 1.6;
  position: relative;
  top: -330rpx;
  z-index: 2;
  background: #fff;
  margin: -175rpx 150rpx 0 150rpx;
  padding: 160rpx 20rpx 60rpx 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 0 220rpx rgba(249, 222, 191, 0.6);
}
.mask-content-text .text1 {
  font-size: 50rpx;
  font-weight: bold;
  background-image: -webkit-linear-gradient(bottom, #ce3443, #a8222b);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.mask-content-text .text2 {
  font-size: 40rpx;
  color: #7c5144;
}
.mask-content-text .text2 span {
  font-size: 45rpx;
  color: #e52232;
}

.mask-content-text .text3 {
  font-size: 30rpx;
  color: #bd2c38;
}

.mask-content-text .text4 {
  margin-top: 50rpx;
}

.mask-content-text .text4 span {
  font-size: 40rpx;
  color: #fff;
  padding: 15rpx 60rpx;
  background: linear-gradient(to bottom, #ad252e, #c83240);
  border-radius: 100rpx;
}

.mask1 .mask1-content {
  text-align: center;
  position: relative;
  top: 240rpx;
  animation: mymove 0.2s 1;
}

.mask1 .mask1-content img {
  height: 171rpx;
  width: 268rpx;
}

.mask1 .mask1-content .close {
  height: 56rpx;
  width: 56rpx;
  margin-top: 30rpx;
}

.mask1-content-text {
  background: #fff;
  margin: -75rpx 130rpx 0 130rpx;
  border-radius: 20rpx;
  padding: 100rpx 20rpx 50rpx 20rpx;
  font-size: 30rpx;
  line-height: 1.6;
  font-weight: bold;
}
.mask1-content-text span {
  color: #cc3333;
}

.mask1-content-text .text2 span {
  font-size: 40rpx;
}
</style>
<style>
page {
  background: #8c0e15;
}
</style>
